<template>
  <div class="header">
    <div>
      <el-row>
        <el-col :span="16"><p class="pp">山东省高考志愿系统</p></el-col>
        <el-col :span="8">
          <div class="select">
            <el-autocomplete
                style="width: 350px; margin-bottom: -50px"
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入您想要查询的院校名称"
                @select="handleSelect"
            ></el-autocomplete>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="menu" style="margin-left: 100px;margin-right: 100px">

        <el-menu :default-active="activeIndex"
                 router
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/index">首页</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/universities">院校查找</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/majors">专业查找</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/recommend">志愿推荐</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/ranking">大学排行</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;" index="/ranking" @click="toAdmin()">管理员</el-menu-item>
          <el-menu-item style="font-size: 18px; margin-right: 50px;">
            <el-button type="text" @click="dialogVisible = true">
              <span style="font-size: 18px; color:#909399">个人信息</span>
            </el-button>
          </el-menu-item>
        </el-menu>
    </div>

    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div style=" text-align: center;">
        <h3><div style="font-family: 'Arial',serif; font-weight: bold;">高考情况个人信息</div></h3>
        <div>
          <div class="selfLine"><span>姓名:</span>&nbsp;<span>{{users.name}}</span></div>
          <div class="selfLine"><span>个人省份:</span>&nbsp;<span>山东</span></div>
          <div class="selfLine"><span>科目组合:</span>&nbsp;<span>{{users.type}}</span></div>
          <div class="selfLine"><span>高考总分:</span>&nbsp;<span>{{users.score}}</span></div>
          <div class="selfLine"><span>全省排名:</span>&nbsp;<span>{{users.ranks}}</span></div>
        </div>
        <div class="selfLine" style="margin: 10px 0px;">
          <el-button type="primary" disabled style="font-size: 16px">修改信息</el-button>
          <el-button type="primary" style="font-size: 16px" @click="goOffline()">退出登录</el-button>
        </div>
      </div>
    <!--@click="dialogVisible = false"-->
      <span slot="footer" class="dialog-footer">
<!--    <el-button >取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>


  </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
            return {
              activeIndex:"1",
              state: '',
              universities:[],
              dialogVisible: false,
              users:{
                name:'',
                region:'山东省',
                type:'',
                score:'',
                rank:''
              },
            }
        },
        methods:{
          goOffline(){
            const storage = window.localStorage;
            storage.setItem("online","off");
            storage.setItem("userid",'');
            storage.setItem("role","user")
            alert("登出成功, 点击进入登陆页面")
            this.$router.push({
              path: '/login'
            });
          },
          findUserById(id){
            this.$axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
              console.log(res.data)
              this.users = res.data;
            });
          },
          handleClose(done) {
            this.dialogVisible = false
          },
            toAdmin(){
              if(window.localStorage.getItem("administrator") === "1"){
                window.open('admin/user.html')
              }else {
                alert("非管理员用户, 老实点!")
                this.$router.push({
                  path: '/index'
                })
              }

            },


          loadAll() {
            let universities = [];
            this.$axios.get("http://localhost:8080/colleges/queryAllColleges").then((res)=>{
              console.log(res.data)
              for(let i=0;i<res.data.length;i++){
                universities[i] = {"value": res.data[i].name, "address": res.data[i].id};
              }
              console.log(universities)
            })
            this.universities = universities;
            return universities;
          },
          querySearchAsync(queryString, cb) {
            const restaurants = this.universities;
            const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
              cb(results);
            }, 3000 * Math.random());
          },
          createStateFilter(queryString) {
            return (state) => {
              return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          handleSelect(item) {
            console.log(item);
            let collegeId = item.address;
            this.$router.push({
              path: '/university/'+collegeId
            });
          },
        },
      created() {
        if(window.localStorage.getItem("online")==="off"){
          console.log("用户当前状态为 离线 强制退出")
          this.$router.push({
            path: '/login'
          })
        }else {
          this.loadAll();
          this.findUserById(window.localStorage.getItem("userid").toString());
        }

      }
    }
</script>

<style scoped>
.header{
  padding: 0 0 0 10px;
  height: 200px;

}
.pp{
  font-size: 38px;
  margin: 20px 0 5px 10px;
  font-family: 'Arial',serif;
  padding-left: 160px;
  font-weight: bold;
}
  .select{
    margin: 30px 0 5px 10px;
  }



</style>
